{% extends 'layout/base.html' %}

{% block content %}
<div class="row mt-5">
    <div class="col-lg">
        <h1 class="mb-5">
            <div>
                <div class="d-inline">Search Logs</div>
                <div style="font-size: 0.4em; top: -16px; left: -6px; position: relative;" class="d-inline">
                    <a href="#" title="" data-container="body" data-toggle="popover" data-placement="right" data-content="Searches use '=' unless you use the '%' operator<br><br>Search for domain 'example.com' will evaluate to &quot;WHERE domain = 'example.com'&quot;<br><br>Search for domain 'example.%' will evaluate to &quot;WHERE domain LIKE 'example.%'&quot;" data-original-title="Search Help"><i class="fas fa-question-circle ml-1"></i></a>
                </div>
            </div>
        </h1>

        <div class="search-form">
            <form action="{{ url_for('logs.index') }}" method="get">
                <input type="hidden" name="advanced" value="1" class="field-advanced">
                <div class="form-group row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">Domain</span></div>
                            <input type="text" class="form-control" value="{{ params.domain }}" name="domain" placeholder="%.example.com">

                            <div class="input-group-prepend"><span class="input-group-text">Source IP</span></div>
                            <input type="text" class="form-control" value="{{ params.source_ip }}" name="source_ip" placeholder="192.168.%">
                        </div>
                    </div>
                    <div class="col-lg-4 pl-0 ml-0">
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">Type</span></div>
                            <select class="custom-select form-control" name="type">
                                <option value=""></option>
                                {% for type in filters.types %}
                                <option value="{{ type }}" {{ 'selected' if type == params.type }}>{{ type }}</option>
                                {% endfor %}
                            </select>

                            <div class="input-group-prepend"><span class="input-group-text">Matched</span></div>
                            <select class="custom-select" name="matched">
                                <option value="-1" {{ 'selected' if params.matched == -1 }}></option>
                                <option value="0" {{ 'selected' if params.matched == 0 }}>No</option>
                                <option value="1" {{ 'selected' if params.matched == 1 }}>Yes</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg pl-0 ml-0">
                        <button type="submit" class="btn btn-primary btn-block">search</button>
                    </div>
                </div>
                <div class="form-group row search-advanced">
                    <div class="col-lg-5">
                        <div class="row">
                            <div class="col-lg mr-0 pr-0">
                                <div class="input-group date" id="date_from" data-target-input="nearest">
                                    <div class="input-group-prepend"><span class="input-group-text">From</span></div>
                                    <input type="text" class="form-control datetimepicker-input text-right" name="date_from" data-target="#date_from" placeholder="YYYY-MM-DD">
                                    <div class="input-group-append" data-target="#date_from" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg ml-0 pl-0">
                                <div class="input-group date" id="time_from" data-target-input="nearest">
                                    <div class="input-group-prepend"><span class="input-group-text">At</span></div>
                                    <input type="text" class="form-control datetimepicker-input text-right" name="time_from" data-target="#time_from" placeholder="HH:MM">
                                    <div class="input-group-append" data-target="#time_from" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-clock"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg ml-0 pl-0">
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">Forwarded</span></div>
                            <select class="custom-select" name="forwarded">
                                <option value="-1" {{ 'selected' if params.forwarded == -1 }}></option>
                                <option value="0" {{ 'selected' if params.forwarded == 0 }}>No</option>
                                <option value="1" {{ 'selected' if params.forwarded == 1 }}>Yes</option>
                            </select>

                            <div class="input-group-prepend"><span class="input-group-text">Blocked</span></div>
                            <select class="custom-select" name="blocked">
                                <option value="-1" {{ 'selected' if params.blocked == -1 }}></option>
                                <option value="0" {{ 'selected' if params.blocked == 0 }}>No</option>
                                <option value="1" {{ 'selected' if params.blocked == 1 }}>Yes</option>
                            </select>
                        </div>
                    </div>
                    {% if current_user.admin %}
                    <div class="col-lg-3 ml-0 pl-0">
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">User</span></div>
                            <select class="custom-select" name="user_id">
                                <option value="-1"></option>
                                <option value="0" {{ 'selected' if 0 == params.user_id }}>Everyone</option>
                                {% for user_id, username in filters.users.items() %}
                                <option value="{{ user_id }}" {{ 'selected' if user_id == params.user_id }}>{{ username }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    {% endif %}
                </div>
                <div class="form-group row search-advanced">
                    <div class="col-lg-5">
                        <div class="row">
                            <div class="col-lg mr-0 pr-0">
                                <div class="input-group date" id="date_to" data-target-input="nearest">
                                    <div class="input-group-prepend"><span class="input-group-text">To</span></div>
                                    <input type="text" class="form-control datetimepicker-input text-right" name="date_to" data-target="#date_to" placeholder="YYYY-MM-DD">
                                    <div class="input-group-append" data-target="#date_to" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg ml-0 pl-0">
                                <div class="input-group date" id="time_to" data-target-input="nearest">
                                    <div class="input-group-prepend"><span class="input-group-text">At</span></div>
                                    <input type="text" class="form-control datetimepicker-input text-right" name="time_to" data-target="#time_to" placeholder="HH:MM">
                                    <div class="input-group-append" data-target="#time_to" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-clock"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg ml-0 pl-0">
                        <div class="row">
                            <div class="col-lg mr-0">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text">Tags</span></div>
                                    <select class="custom-select" name="tags" id="tags" multiple="multiple">
                                        {% for tag in filters.tags %}
                                        <option value="{{ tag }}" {{ 'selected' if tag in params.tags }}>{{ tag }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            {% if aliases|length > 0 %}
                            <div class="col-lg ml-0 pl-0">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text">Alias</span></div>
                                    <select class="custom-select" name="alias">
                                        <option value="-1"></option>
                                        {% for ip, alias in aliases.items() %}
                                        <option value="{{ alias }}" {{ 'selected' if alias == params.alias }}>{{ alias }} - {{ ip }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg text-right">
                        <a href="#" class="text-info toggle-advanced">show advanced search</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{% include 'logs/results.html' %}

<script type="text/javascript">
    $(document).ready(function() {
        $('#date_from').datetimepicker({
            format: 'Y-MM-DD',
            date: '{{ params.full_date_from }}'
        });

        $('#date_to').datetimepicker({
            format: 'Y-MM-DD',
            date: '{{ params.full_date_to }}'
        });

        $('#time_from').datetimepicker({
            format: 'HH:mm',
            date: '{{ params.full_date_from }}'
        });

        $('#time_to').datetimepicker({
            format: 'HH:mm',
            date: '{{ params.full_date_to }}'
        });

        $('#tags').select2({
            tags: true
        });

        $('.toggle-advanced').click(function() {
            if ($('.search-advanced').hasClass('hidden')) {
                $(this).text('hide advanced search');
                $('.search-advanced').removeClass('hidden');
                $('.search-form form').append(advancedField);
            } else {
                $(this).text('show advanced search');
                $('.search-advanced').addClass('hidden');
                $('.field-advanced').remove();
            }
        });

        var isAdvancedVisible = {{ 'true' if advanced else 'false' }};

        var advancedField = $('.field-advanced').clone();
        $('.field-advanced').remove();
        $('.search-advanced').addClass('hidden');

        if (isAdvancedVisible) {
            $('.toggle-advanced').click();
        }
    });
</script>
{% endblock %}